<style type="text/css">
    #preview{width:255px;height:100px;border:1px solid #000;overflow:hidden;}
    #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    #preview1{width:265px;height:100px;border:1px solid #000;overflow:hidden;}
    #imghead1 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;用户设置
    </li>
    <li>运营商信息</li>
</ol>

<div class="col-xs-12 info-center" >
    <div class="bs-callout bs-callout-warning">
        <h4>
            系统使用单位: <strong>{:C('SERVICE')}</strong>
        </h4>
    </div>
</div>

<div class="col-xs-12 info-center">
    <div class="panel panel-mcit">
        <div class="panel-heading">
            <i class="fa fa-list"></i>
            &nbsp;&nbsp;运营商信息 &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
            <a href="__URL__/changePwd" style="color: #ffffff"><i class="fa fa-users"></i>&nbsp;&nbsp;<b>修改密码</b></a>&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
        </div>
        <div class="panel-body">
            <div class="alert alert-warning">
                <p><i class="fa fa-paperclip"></i>&nbsp;完善资料</p>
            </div>
            <form class="mcit-dataform" id="data_form" method="post" action={:U("Set/index")} enctype="multipart/form-data">
                <div class="panel-footer">
                    <div class="panel-mcit">

                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">账号</span>
                                <input type="text"   class="form-control" value="{$user.oper_login_name}" readonly>
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">所在区域</span>
                                <input type="text"   class="form-control" value="{$user.location_text}" readonly>
                            </div>
                        </div>
                        <div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">运营商名称</span>
                                <input type="text" id="phone" value="{$user.oper_name}"  name="oper_name" class="form-control" placeholder="运营商名称">
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">详细地址</span>
                                <input type="text" id="address" value="{$user.address}" name="address" class="form-control" placeholder="详细地址">
                            </div>
                        </div>
                        <div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">顶部背景色</span>
                                <input type="hidden"  name="background" class="demo form-control" value='<if condition="$user.background eq ''">#1EA3E8<else />{$user.background}</if>'>
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">顶部字体颜色</span>
                                <input type="hidden"  name="color" class="demo form-control" value='<if condition="$user.color eq ''">#ffffff<else />{$user.color}</if>'>
                            </div>
                        </div><div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <div class="input-group">
                            <span class="input-group-addon">
                                <span class="btn">顶部logo</span>
                                <div id="preview" style="border: 0">
                                    <if condition="$user.logo eq ''">
                                        <img  src="__PUBLIC__/img/3.png" alt="" style="width: 119px;height: 48">
                                        <elseif condition="$user.logo neq ''" />
                                        <img  src="__PUBLIC__/{$user.logo}" alt="" style="width: 119px;height: 48">
                                        <else />
                                        <img id="imghead"  src='<%=request.getContextPath()%>/images/defaul.jpg'>
                                    </if>
                                </div>
                            </span>
                                <input type="file"  onchange="previewImage(this)"  name="logo" value="{$user.logo}" style="margin-left:5px;margin-top: 30%;align-items: center">
                            <span class="help-block">
                                    <i class="fa fa-hand-o-up"></i>
                                    &nbsp;格式仅限'jpg', 'gif', 'png', 'jpeg'类型。尺寸：119*48，高固定
                                </span>
                            </div>
                        </div>


                        <div class="col-xs-5">
                            <div class="input-group">
                            <span class="input-group-addon">
                                <span class="btn">顶部头像</span>
                                <div id="preview1" style="border: 0">
                                    <if condition="$user.portrait eq ''">
                                        <img src="__PUBLIC__/img/touxiang.jpg" style="width: 32px;height: 33px">
                                        <elseif condition="$user.portrait neq ''" />
                                        <img src="__PUBLIC__/{$user.portrait}" style="width: 32px;height: 33px">
                                        <else />
                                        <img id="imghead1"  src='<%=request.getContextPath()%>/images/defaul.jpg'>
                                    </if>
                                </div>
                            </span>
                                <input type="file"  onchange="previewImage1(this)"  name="portrait" value="{$user.portrait}" style="margin-left:5px;margin-top: 30%;">
                            <span class="help-block">
                                    <i class="fa fa-hand-o-up"></i>
                                    &nbsp;格式仅限'jpg', 'gif', 'png', 'jpeg'类型。尺寸：32*33
                                </span>
                            </div>
                        </div><div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <button type="submit" class="btn btn-warning"><i class="fa fa-upload"></i>&nbsp;确定修改</button>
                        </div>
                        <div class="clearfix"></div>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<import type='css' file="js.minicolors.jquery#minicolors" />
<import file="js.minicolors.jquery#minicolors#min" />
<script>
    $("#data_form").ajaxForm({
        dataType:'json',
        clearForm:true,
        beforeSubmit:function(){
            if($("#phone").val()==''){
                alertify.error("请填写厂商名称");
                return false;
            }
            if($("#address").val()==''){
                alertify.error("请填写厂商地址");
                return false;
            }
            return true
        },
        success:function(data){
            if(data.state==100){
                alertify.success(data.msg);
                location.href = data.url;
            }else{
                alertify.error(data.msg);
            }
        }
    });
</script>
<script>
    $(document).ready( function() {
        $('.demo').each( function() {
            $(this).minicolors({
                control: $(this).attr('data-control') || 'hue',
                defaultValue: $(this).attr('data-defaultValue') || '',
                inline: $(this).attr('data-inline') === 'true',
                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                opacity: $(this).attr('data-opacity'),
                position: $(this).attr('data-position') || 'bottom left',
                change: function(hex, opacity) {
                    var log;
                    try {
                        log = hex ? hex : 'transparent';
                        if( opacity ) log += ', ' + opacity;
                        console.log(log);
                    } catch(e) {}
                },
                theme: 'default'
            });
        });

    });
</script>
<script type="text/javascript">
    //图片上传预览    IE是用了滤镜。
    function previewImage(file)
    {
        var MAXWIDTH  = 255;
        var MAXHEIGHT = 100;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>
<script type="text/javascript">
    //图片上传预览    IE是用了滤镜。
    function previewImage1(file)
    {
        var MAXWIDTH  = 265;
        var MAXHEIGHT = 100;
        var div = document.getElementById('preview1');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead1 style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>